<template>
  <view class="head">
    <u-navbar title="设置" :placeholder="true" :autoBack="true"> </u-navbar>
  </view>
  <view class="settings">
    <view
      class="settingslist"
      v-for="(item, index) in settingslist"
      :key="index"
    >
      <view class="left">{{ item.title }}</view>
      <view class="right">
        <img
          src="http://uniqn.zmycode.top/%E5%90%91%E5%8F%B3%E7%AE%AD%E5%A4%B4%20(1).png"
          alt="" class="img"
        />
      </view>
    </view>
  </view>
  <view class="color">
    <view class="left">
      <img src="http://uniqn.zmycode.top/%E9%A2%9C%E8%89%B2.png" alt="" class="img"/>
      <view class="color-box"></view>
      <view class="title">主题色:<text>官方</text></view>
    </view>
    <view class="right">
      <img src="http://uniqn.zmycode.top/%E9%A2%9C%E8%89%B2%20(1).png" alt="" class="img"/>
      <view class="title">选择主题颜色</view>
    </view>
  </view>
  <view class="quit"> 退出登录 </view>
</template>

<script setup>
import { ref } from "vue";
import { settingslist } from "./mine-settings.js";
</script>

<style lang="scss" scoped>
.settings {
  // padding-top: 10rpx;
  .settingslist {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    background-color: #fff;
    border-bottom: 1px solid rgb(211, 211, 211);
    .right {
      .img {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
  .settingslist:nth-child(3n + 1) {
    margin-top: 10rpx;
  }
  .settingslist:nth-child(3n) {
    border: none;
  }
}
.color {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .img {
    width: 30rpx;
    height: 30rpx;
  }
  .left {
    display: flex;
    justify-content: left;
    align-items: center;

    .color-box {
      width: 60rpx;
      height: 60rpx;
      background-color: #f9436a;
      border-radius: 10rpx;
      box-shadow: 2px 2px 10rpx #f9436a;
      margin: 0 20rpx;
    }
    .title {
      font-size: 28rpx;
      color: #444444;
      text {
        color: #f9436a;
      }
    }
  }
  .right {
    background-color: #f9436a;
    display: flex;
    justify-content: right;
    align-items: center;
    padding: 10rpx 20rpx;
    border-radius: 40rpx;

    .title{
      color: #fff;
      font-size: 20rpx;
      margin-left: 10rpx;
    }
  }
}
.quit {
  text-align: center;
  padding: 20rpx;
  background-color: #fff;
  color: #f9436a;
  margin-top: 30rpx;
}
</style>
